<template>
	<view class="container">
		<view class="top">
			<view class="top_tip">
				<image src="../../static/img/myCenter/more.png" mode=""></image>
				<navigator url="/pages/mySetting/mySetting"><image src="../../static/img/myCenter/setting.png" mode=""></image></navigator>
			</view>
			<view class="user_info">
				<view class="user_info_left">
					<image :src="isavator ? userinfo.avatar  : '../../static/img/myCenter/girl.png'" mode="" class="avartar"></image>
					<view class="">
						<view class="name flex_start">
							<view class="">{{ userinfo.nickname }} </view>
							<view class="creditNum">当前信誉值：{{ userinfo.score }}</view>
						</view>
						<view class="phone">{{ userinfo.phone }}</view>
						
					</view>
				</view>

				<view class="user_info_right">
					<image src="../../static/img/myCenter/view.png" mode="" class="view_img"></image>
					<view class="open_view" @click="goZhibo">开直播</view>
				</view>
			</view>
		</view>
		<view class="bottom_part">
			<view class="my_order">
				<view class="order_more">
					<view class="title">我的订单</view>
					<view class="more">
						<view class="">查看全部订单</view>
						<image src="../../static/img/myCenter/arrowright.png" mode=""></image>
					</view>
				</view>

				<view class="order_status_part">
					<view class="order_status_item" v-for="(item, index) in orderStatusList" :key="index" @click="order(index)">
						<image :src="item.img" mode="" class="order_status_img" :style="item.style"></image>
						<view class="order_status_name">{{ item.name }}</view>
						<view class="count" v-if="index == 1 && count > 0">{{count}}</view>
					</view>
				</view>
			</view>
			<view class="ad_part"><image src="../../static/img/myCenter/ad.png" mode=""></image></view>
			<view class="util_part">
				<view class="util_title">常用工具</view>
				<view class="usual_utils_list">
					<view class="usual_utils" v-for="(item, index) in utilList" :key="index" @click="getUtil(index)">
						<view class="image"><image :src="item.img" mode="" :style="item.style"></image></view>
						<view class="name">{{ item.name }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>

export default {
	data() {
		return {
			userinfo: [],
			orderStatusList: [
				{
					img: '../../static/img/myCenter/order1.png',
					name: '待接单',
					style: 'width:54rpx;height:43rpx'
				},
				{
					img: '../../static/img/myCenter/order2.png',
					name: '已发布',
					style: 'width:52rpx;height:43rpx'
				},
				{
					img: '../../static/img/myCenter/order3.png',
					name: '已报名',
					style: 'width:52rpx;height:39rpx'
				},
				{
					img: '../../static/img/myCenter/order4.png',
					name: '接单设置',
					style: 'width:51rpx;height:43rpx'
				}
			],
			utilList: [
				{
					img: '../../static/img/myCenter/util1.png',
					name: '钱包管理',
					style: 'width:47rpx;height:39rpx'
				},
				{
					img: '../../static/img/myCenter/util2.png',
					name: '我的简历',
					style: 'width:46rpx;height:44rpx'
				},
				{
					img: '../../static/img/myCenter/util3.png',
					name: '我的收藏',
					style: 'width:44rpx;height:44rpx'
				},
				{
					img: '../../static/img/myCenter/util4.png',
					name: '我的发帖',
					style: 'width:45rpx;height:40rpx'
				},
				{
					img: '../../static/img/myCenter/util5.png',
					name: '我的用车',
					style: 'width:52rpx;height:40rpx'
				},
				{
					img: '../../static/img/myCenter/util9.png',
					name: '司机接单',
					style: 'width:52rpx;height:40rpx'
				},
				{
					img: '../../static/img/myCenter/util10.png',
					name: '面试记录',
					style: 'width:52rpx;height:40rpx'
				},
				{
					img: '../../static/img/myCenter/util11.png',
					name: '在线客服',
					style: 'width:44rpx;height:42rpx'
				},
				{
					img: '../../static/img/myCenter/util7.png',
					name: '投诉管理',
					style: 'width:40rpx;height:42rpx'
				},
				{
					img: '../../static/img/renz.png',
					name: '身份认证',
					style: 'width:42rpx;height:42rpx'
				},
				{
					img: '../../static/img/myCenter/util8.png',
					name: '我的设置',
					style: 'width:42rpx;height:42rpx'
				},
				{
					img: '../../static/img/myCenter/record.png',
					name: '登陆记录',
					style: 'width:42rpx;height:42rpx'
				},
				{
					img: '../../static/img/myCenter/share.png',
					name: '分享好友',
					style: 'width:42rpx;height:42rpx'
				},
				{
					img: '../../static/img/myCenter/chart.png',
					name: '聊天记录',
					style: 'width:42rpx;height:42rpx'
				}
			],

			isavator: false,
			count:0
		};
	},
	onShow() {
		this.getuserinfo();
	},
	onLoad() {
		this.$utils.requert({
			url: 'staticData',
			type: 'get',
		}).then(res => {
			if (res.code === 1) {
				console.log(res)
			} else {
				this.$utils.showLayer(res.message)
			}
		})
		console.log('onload ');
		this.getCount()
		// 根据给定的用户信息，初始化插件  直播
		// var userID = '1';
		// var config = genTestUserSig(userID);
		// console.log(config.sdkAppID + ', useSin:' + config.userSig);
		// txCall.config(
		// 	{
		// 		userId: userID, //我的用户ID
		// 		userSig: config.userSig, //UserSig的密钥
		// 		nickName: userinfo.nickname, //用户昵称
		// 		useDefaultRandomAvatar: true, //是否使用随机头像
		// 		userAvatar: '', //头像地址
		// 		appid: config.sdkAppID //腾讯云申请的appID
		// 	},
		// 	ret => {
		// 		console.log(ret.code);
		// 	}
		// );
	},
	methods: {
		getCount(){
			this.$utils.requert({url:'notScan',data:{},type:'post'}).then(res=>{
				if(res.code === 1 ){
					this.count = res.data.recruitCount+res.data.timeCount
				}else{    
					this.$utils.showLayer(res.message)
				}
			})
		},
		getuserinfo() {
			this.$utils
				.requert({
					url: 'personMsg',
					type: 'post'
				})
				.then(res => {
					if (res.code === 1) {
						uni.hideLoading()
						// this.$utils.showLayer(res.message)
						this.userinfo = res.data;
						uni.setStorage({
							key: 'userinfo',
							data: res.data
						});
						console.log(this.userinfo.avatar)
						if (this.userinfo.avatar) {
							this.isavator = true;
						}
					} else {
						this.$utils.showLayer(res.message);
					}
				});
		},
		getUtil(index) {
			switch (index) {
				case 0:
					uni.navigateTo({
						url: '/pages/walletManage/walletManage'
					});
					break;
				case 1:
					uni.navigateTo({
						url: '/pages/personalProfile/personalProfile'
					});
					break;
				case 2:
					uni.navigateTo({
						url: '/pages/myCollect/myCollect'
					});
					break;
				case 3:
					uni.navigateTo({
						url: '/pages/myinvitation/myinvitation'
					});
					break;
				case 4:
					uni.navigateTo({
						url: '/pages/haveUseCar/haveUseCar'
					});

					break;
				case 5:
					uni.navigateTo({
						url: '/pages/driverSide/receivingOrdersList/receivingOrdersList'
					});
					break;
				case 6:
					uni.navigateTo({
						url:'/pages/InterviewRecord/InterviewRecord'
					})
					break;
				case 7:
					// uni.navigateTo({
					// 	url: '/pages/complain/complain'
					// });
					break;
				case 8:
					uni.navigateTo({
						url: '/pages/complain/complain'
					});
					break;
				case 9:
					uni.navigateTo({
						url: '/pages/selsectIdentity/selsectIdentity'
					});
					break;	
				case 10:
					uni.navigateTo({
						url: '/pages/mySetting/mySetting'
					});
					break;	
				case 11:
					uni.navigateTo({
						url: '/pages/loginRecord/loginRecord'
					});
					break;	
				case 12:
					uni.navigateTo({
						url: '/pages/sharePage/sharePage'
					});
					break;
				case 13:
					uni.navigateTo({
						url: '/pages/tim/record'
					});
					break;
			}
		},
		order(index) {
			switch (index) {
				case 0:
					uni.navigateTo({
						url: '/pages/awaitOrder/awaitOrder'
					});
					break;
				case 1:
					uni.navigateTo({
						url: '/pages/haveIssue/haveIssue'
					});
					break;
				case 2:
					uni.navigateTo({
						url: '/pages/haveAccectOrder/haveAccectOrder'
					});
					break;
				case 3:
					uni.navigateTo({
						url: '/pages/acceptOrderSetting/acceptOrderSetting'
					});
					break;
			}
		},
		goZhibo() {
			//创建直播
			uni.navigateTo({
				url: '/pages/zhibo/zhibo'
			})
		}
	}
};
</script>
<style>
page {
	width: 100%;
	background-color: #f5f4f6;
}
</style>

<style scoped>
.container {
	width: 100%;
	padding-bottom: 70rpx;
}

.top {
	background-color: #fd9103;
	padding: 0 33rpx;
	box-sizing: border-box;
	padding-bottom: 142rpx;
	border-bottom-left-radius: 60rpx;
	border-bottom-right-radius: 60rpx;
}

.top .top_tip {
	display: flex;
	justify-content: space-between;
	margin-bottom: 47rpx;
}

.top .top_tip image:nth-child(1) {
	width: 38rpx;
	height: 30rpx;
}

.top .top_tip image:nth-child(1) {
	width: 45rpx;
	height: 43rpx;
}

.user_info {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.user_info .avartar {
	width: 110rpx;
	height: 110rpx;
	margin-right: 28rpx;
	border-radius: 50%;
}

.user_info_left,
.user_info_right {
	display: flex;
	color: #fff;
}

.user_info_left .name {
	font-size: 34rpx;
}

.user_info_left .phone {
	font-size: 26rpx;
}
.creditNum{
	font-size: 22rpx;
	margin-left: 15rpx;
	/* color: red; */
}
.view_img {
	width: 35rpx;
	height: 35rpx;
	margin-right: 6rpx;
}

.open_view {
	font-size: 28rpx;
}

.bottom_part {
	padding: 0 20rpx;
	box-sizing: border-box;
}

.my_order {
	background-color: #fff;
	padding: 38rpx 44rpx;
	box-sizing: border-box;
	margin-top: -110rpx;
	border-radius: 10rpx;
}

.my_order .order_more {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.order_more .title {
	font-size: 32rpx;
	color: #3a3a3a;
}

.order_more .more {
	font-size: 22rpx;
	color: #888788;
	display: flex;
	align-items: center;
}

.order_more .more image {
	width: 12rpx;
	height: 20rpx;
	margin-left: 10rpx;
}

.order_status_part {
	display: flex;
	align-items: center;
	padding: 0 10rpx;
	box-sizing: border-box;
	justify-content: space-between;
	text-align: center;
	margin-top: 40rpx;
}
.order_status_item{
	position: relative;
}
.count{
	width: 30rpx;
	height: 30rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 24rpx;
	color: white;
	background: red;
	border-radius: 50%;
	position: absolute;
	top: -20rpx;
	right: -20rpx;
}

.order_status_img {
	margin-bottom: 6rpx;
}

.order_status_name {
	font-size: 25rpx;
	color: #3a3a3a;
}

.ad_part {
	width: 100%;
	height: 230rpx;
	box-sizing: border-box;
	margin: 20rpx 0;
}

.ad_part image {
	width: 100%;
	height: 100%;
}

.util_part {
	background-color: #fff;
	border-radius: 10rpx;
	padding: 30rpx 39rpx;
}

.util_part .util_title {
	font-size: 32rpx;
	color: #3a3a3a;
}

.usual_utils_list {
	display: flex;
	flex-wrap: wrap;
	text-align: center;
	align-items: center;
}

.usual_utils {
	width: 104rpx;
	margin-right: 70rpx;
	font-size: 25rpx;
	color: #3f3f3f;
	margin-top: 46rpx;
}

.usual_utils:nth-child(4n) {
	margin-right: 0;
}

.usual_utils image {
	margin-bottom: 10rpx;
}

.version_update {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: rgb(1, 1, 1, 0.8);
}

.big_model {
	width: 475rpx;
	min-height: 632rpx;
	position: absolute;
	top: 262rpx;
	left: 137rpx;
}

.cancel_model {
	position: absolute;
	top: 920rpx;
	left: 347rpx;
	width: 55rpx;
	height: 55rpx;
	margin-top: 30rpx;
}
.version_update .content {
	width: 415rpx;
	font-size: 22rpx;
	color: #666666;
	position: absolute;
	top: 500rpx;
	left: 160rpx;
}
 uni-page-head
    {
        display: none;
    }
</style>
